<template>
  <div>
    <div class="container live">
      <!-- 头部导航栏 -->
      <div class="home_nav">
        <div class="home_left">
          <img
            src="https://ssr-static.msstatic.com/h5/mobile/@public-online/imgs/header/logo.acc780e7a19f22c1d8e89805488fcfef.png"
            alt=""
          />
        </div>
        <router-link tag="div" to="/search" class="home_right">
          <span class="iconfont icon-sousuo"></span>
        </router-link>
      </div>
      <!-- 视频 -->
      <div class="video-box">
        <!-- 视频 -->
        <div class="video-bf" @click.stop="toggle">
          <meta name="referrer" content="no-referrer" />
          <video
            :src="big_content.video"
            width="100%"
            id="example_video"
            autoplay
            loop
          ></video>
          <v-barrage :arr="arr" :isPause="isPause" :percent="50"> </v-barrage>
        </div>
        <!-- 头部内容 -->
        <div class="video_top" v-show="video_content">
          <div class="video_top_left">
            <span class="iconfont icon-guanbi" @click="$router.go(-1)"></span>
            <span class="indent" @click="$router.go(-1)">{{
              big_content.title
            }}</span>
          </div>
          <div class="video_top_right">
            <div class="img">
              <img
                src="http://a.msstatic.com/huya/mobile/img/crowd_2017_97bb042.png"
                alt=""
              />
            </div>
            <div class="num">{{ big_content.hot }}</div>
          </div>
        </div>
        <!-- 底部内容 -->
        <div class="video_bottom" v-show="video_content">
          <div class="video_bottom_left" @click="toggle_p">
            <span class="iconfont icon-zanting" v-show="toggle_play"></span>
            <span class="iconfont icon-bofang" v-show="!toggle_play"></span>
          </div>
          <div class="video_bottom_right">
            <p>反馈</p>
            <p>高清</p>
            <p
              class="iconfont icon-danmukaiqi"
              v-show="toggle_chat == true"
              @click="toggle_c"
            ></p>
            <p
              class="iconfont icon-danmuguanbi"
              v-show="toggle_chat == false"
              @click="toggle_c"
            ></p>
          </div>
        </div>
      </div>

      <!-- 聊天、主播、订阅 -->
      <div class="live_tab">
        <div :class="['live_tab_item', { con: tab == 1 }]" @click="tab = 1">
          <span>聊天</span>
        </div>
        <div :class="['live_tab_item', { con: tab == 2 }]" @click="tab = 2">
          <span>主播信息</span>
        </div>
        <!-- 未订阅 -->
        <div
          class="live_tab_item subscribe"
          v-if="!subscribe_show"
          @click="sub_toggle"
        >
          <div class="img">
            <img
              src="https://ssr-static.msstatic.com/h5/mobile/@public-online/imgs/room/new_live_subs_ico.cebe471ac17b59bc79defce96541f822.png"
              alt=""
            />
          </div>
          <p>订阅</p>
        </div>
        <!-- 已订阅 -->
        <div
          class="live_tab_item subscribe already"
          v-if="subscribe_show"
          @click="sub_toggle"
        >
          <p>已订阅</p>
        </div>
      </div>

      <!-- 聊天内容 -->
      <div class="chat_content" v-show="tab == 1">
        <div
          class="chat_content_item"
          v-for="(item, index) in chat_content_list"
          :key="index"
        >
          <span class="name">{{ item.name }}:</span>
          <span class="text">{{ item.text }}</span>
          <img v-if="item.img" :src="item.img" alt="" />
          <span v-if="item.num">x{{ item.num }}</span>
        </div>
      </div>

      <!-- 底部评论、礼物 -->
      <div class="comment" v-show="tab == 1">
        <div class="comment_left">
          <input
            type="text"
            placeholder="期待您的神评论"
            v-model="sendContent"
            @keyup.enter="sendBarrage"
          />
          <p @click="sendBarrage">发送</p>
        </div>
        <div class="comment_right">
          <van-cell @click="showPopup"
            ><span class="iconfont icon-liwu"></span
          ></van-cell>
          <van-popup
            v-model="show"
            round
            position="bottom"
            :style="{ height: '51%' }"
          >
            <div class="lists_img">
              <div
                :class="['item_img', { con: item.id == giftId }]"
                v-for="item in gift_lists"
                :key="item.id"
                @click="gift_focus(item)"
              >
                <div class="img">
                  <img :src="item.img" alt="" />
                </div>
                <p class="gift_name">{{ item.name }}</p>
                <p class="gift_price">{{ item.price }}虎币</p>
              </div>
            </div>
            <div class="gift_bottom">
              <div class="gift_bottom_left">
                <p class="iconfont icon-qiandai"></p>
                <p>{{ coin }}</p>
                <router-link tag="p" to="/recharge">充值</router-link>
              </div>
              <div class="gift_bottom_right">
                <p @click="reduce_grif_num">-</p>
                <p>{{ gift_item_num }}</p>
                <p @click="add_grif_num">+</p>
                <p @click="add">赠送</p>
              </div>
            </div>
          </van-popup>
        </div>
      </div>

      <!-- 礼物显示 -->
      <div class="img_show" v-if="chat_show_img2">
        <img :src="chat_show_img2" alt="" />
      </div>

      <!-- 主播信息 -->
      <div class="anchor" v-show="tab == 2">
        <router-link tag="div" to="/chat" class="anchor_img">
          <img :src="big_content.img_head" alt="" />
        </router-link>
        <div class="anchor_info">
          <p>{{ big_content.title }}</p>
          <p>{{ big_content.name }}</p>
          <p>
            <span class="iconfont icon-wode"></span>
            <span class="hot">226.4万</span>
          </p>
        </div>
      </div>

      <!-- 主播动态 -->
      <div class="dynamic" v-show="tab == 2">
        <div class="dynamic_top">主播动态:</div>
      </div>

      <!-- 主播动态内容 -->
      <div class="dynamic_list" v-show="tab == 2">
        <div class="dynamic_item">
          <div class="dynamic_item_top">
            <div class="img">
              <img :src="big_content.img_head" alt="" />
            </div>
            <div class="name_time">
              <p>{{ big_content.name }}</p>
              <p>3天前</p>
            </div>
          </div>
          <div class="dynamic_item_content">巅峰赛连胜啦！！！</div>
          <div class="dynamic_item_bottom">
            <p @click="thumbs_show">
              <span class="iconfont icon-dianzan" v-show="thumbs"></span>
              <span class="iconfont icon-dianzan_kuai" v-show="!thumbs"></span>
              <span>点赞</span>
            </p>
            <p>
              <span class="iconfont icon-pinglun"></span>
              <!-- 评论 -->
              <van-cell @click="showPopup">评论</van-cell>
              <van-popup
                v-model="show"
                round
                position="bottom"
                :style="{ height: '60%' }"
              >
                <div class="van_popup_top">
                  <p>评论</p>
                  <p>{{ van_popup_item_list.length }}条</p>
                </div>
                <div
                  class="van_popup_item"
                  v-for="item in van_popup_item_list"
                  :key="item.id"
                >
                  <div class="img">
                    <img
                      src="https://panqiu8-1309958500.cos.ap-guangzhou.myqcloud.com/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221029101636.jpg"
                      alt=""
                    />
                  </div>
                  <div class="van_popup_item_content">
                    <p>kunkun</p>
                    <p>
                      <span> {{ item.text }} </span>
                      <span
                        class="iconfont icon-dianzan"
                        v-if="!item.checked"
                        @click="commit_toggle(item.id)"
                      ></span>
                      <span
                        class="iconfont icon-dianzan_kuai"
                        v-if="item.checked"
                        @click="commit_toggle(item.id)"
                      ></span>
                    </p>
                  </div>
                </div>
                <div class="van_popup_bottom">
                  <p class="iconfont icon-cuowu" @click="show = false"></p>
                  <input
                    type="text"
                    placeholder="发表一条神评论..."
                    v-model="van_popup_bottom_commit"
                    @keydown.enter="add_commit"
                  />
                </div>
              </van-popup>
            </p>
          </div>
        </div>
      </div>

      <!-- 正在直播 -->
      <div class="follow_live" v-show="tab == 2">正在直播</div>

      <!-- 直播人员 -->
      <div class="home_lists" v-show="tab == 2">
        <div class="home_lists_content">
          <router-link
            tag="div"
            :to="'/details?id=' + item.id"
            class="home_item"
            v-for="item in wzry"
            :key="item.id"
          >
            <div class="home_item_img">
              <img :src="item.img" alt="" />
              <p>{{ item.p }}</p>
            </div>
            <div class="home_item_title">{{ item.title }}</div>
            <div class="home_item_bottom">
              <div class="home_item_name">{{ item.name }}</div>
              <div class="home_item_hot">
                <div class="home_item_hot_img">
                  <img
                    src="http://a.msstatic.com/huya/mobile/img/crowd_2017_97bb042.png"
                    alt=""
                  />
                </div>
                <p>{{ item.hot }}</p>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTotalData, getHomeData } from "../api/home.js";
import VBarrage from "../components/SendContent.vue";
export default {
  props: ["video_data"],
  data() {
    return {
      //虎牙币
      coin: null,
      // 直播总内容对象
      big_content: {
        id: this.$route.query.id,
        img: "https://anchorpost.msstatic.com/cdnimage/anchorpost/1010/66/6aba6b4323ab3c52960e7bf169d08e_2336_1667811590.jpg?imageview/0/w/338/h/190/blur/1",
        p: "王者荣耀",
        video:
          "http://vd3.bdstatic.com/mda-nhg4sewjnu68nncz/360p/h264/1660706771728892906/mda-nhg4sewjnu68nncz.mp4",
        title: "狼队 vs AG 雷霆杯双败赛第一轮",
        name: "王者荣耀赛事",
        hot: "323.8万",
        img_head:
          "https://huyaimg.msstatic.com/avatar/1010/66/6aba6b4323ab3c52960e7bf169d08e_180_135.jpg?1665642852",
      },
      //订阅的切换
      subscribe_show: false,
      //评论内容同步
      van_popup_bottom_commit: "",
      //播放暂停按钮
      toggle_play: true,
      //弹幕显示与隐藏
      toggle_chat: true,
      video_content: false,
      //点赞效果
      thumbs: true,
      //弹幕
      arr: [],
      isPause: false,
      sendContent: null,
      isJs: false,
      direction: "default",
      //礼物弹出框
      show: false,
      //礼物数据
      gift_lists: [
        {
          id: 1,
          img: "https://img.588ku.com/gif/20/08/19/00fa79eb37961639eb0c5e77d4944825.gif!qk277",
          name: "爱心",
          price: 100,
        },
        {
          id: 2,
          img: "https://img.588ku.com/gif/21/05/26/f812464b3d269649f09c72ba4dab89b6.gif!qk277",
          name: "黄金",
          price: 588,
        },
        {
          id: 3,
          img: "https://img.588ku.com/gif/20/09/01/88b7b3f5c46ad39d367b0b5a4ca030f7.gif!qk277",
          name: "666",
          price: 999,
        },
        {
          id: 4,
          img: "https://img.588ku.com/gif/20/07/01/a5201eb607d71205e82f4bbf5927b1e8.gif!qk277",
          name: "跑车",
          price: 888,
        },
        {
          id: 5,
          img: "https://img.588ku.com/gif/21/05/15/c4d78b83ef2696800368ccde460729e1.gif!qk277",
          name: "小兔子",
          price: 520,
        },
        {
          id: 6,
          img: "https://img.588ku.com/gif/21/06/16/0a0e6e24958bee44d6e1785a42d1dec9.gif!qk277",
          name: "ok",
          price: 168,
        },
        {
          id: 7,
          img: "https://img.588ku.com/gif/21/06/15/4ca98a2322a004b7a6697f6146fd0bb2.gif!qk277",
          name: "红包",
          price: 666,
        },
        {
          id: 8,
          img: "https://img.588ku.com/gif/20/08/19/4e9b590a58a31e46570e169ab37320f4.gif!qk277",
          name: "鼓掌",
          price: 199,
        },
      ],
      //礼物边框切换
      giftId: null,
      //聊天内容
      chat_content_list: [],
      chat_content_img: [
        "https://a.msstatic.com/huya/mobile/img/emots@3/jx.png",
        "https://a.msstatic.com/huya/mobile/img/emots@3/jx.png",
      ],
      chat_show_img: "",
      chat_show_img2: "",
      tab: 1,
      //评论里面评论列表
      van_popup_item_list: [
        {
          id: 1,
          text: "唱跳rap",
          checked: false,
        },
        {
          id: 2,
          text: "背带裤",
          checked: false,
        },
      ],
      commit_id: 10,
      //点击的时候礼物的数据
      gift_item_lists: null,
      //礼物数量
      gift_item_num: 1,
      wzry: null,
    };
  },
  methods: {
    //礼物数量减少
    reduce_grif_num() {
      if (this.gift_item_num < 2) {
        this.gift_item_num = 1;
      } else {
        this.gift_item_num -= 1;
      }
    },
    //礼物数量增加
    add_grif_num() {
      this.gift_item_num += 1;
    },
    //订阅的切换
    sub_toggle() {
      this.subscribe_show = !this.subscribe_show;
      let follow_item = JSON.parse(window.localStorage.getItem("total"));
      // console.log(follow_item);
      let index = follow_item.findIndex(
        (item) => item.id == this.$route.query.id
      );
      if (this.subscribe_show) {
        follow_item[index].checked = true;
        this.$toast("已订阅");
      } else {
        follow_item[index].checked = false;
        this.$toast("取消订阅");
      }
      window.localStorage.total = JSON.stringify(follow_item);
      // console.log(window.localStorage.total);
    },
    //添加评论
    add_commit(event) {
      let name = event.target.value;
      this.van_popup_item_list.push({
        id: this.commit_id,
        text: name,
        checked: false,
      });
      this.$toast("评论成功");
      this.van_popup_bottom_commit = "";
      this.commit_id += 1;
    },
    //评论里面的点赞效果
    commit_toggle(id) {
      let index = this.van_popup_item_list.findIndex((item) => item.id == id);
      this.van_popup_item_list[index].checked =
        !this.van_popup_item_list[index].checked;
      if (this.van_popup_item_list[index].checked) {
        this.$toast("点赞成功");
      } else {
        this.$toast("点赞取消");
      }
    },
    //点赞切换
    thumbs_show() {
      this.thumbs = !this.thumbs;
      if (!this.thumbs) {
        this.$toast("点赞成功");
      } else {
        this.$toast("取消点赞");
      }
    },
    //礼物弹出框
    showPopup() {
      this.show = true;
    },
    //视频的播放与暂停
    toggle_p() {
      var vide = document.getElementById("example_video");
      // console.log(vide);
      if (vide.paused) {
        vide.play();
        this.toggle_play = true;
      } else if (vide.play()) {
        vide.pause();
        this.toggle_play = false;
      }
      // this.toggle_play = !this.toggle_play;
    },
    //弹幕的显示与隐藏
    toggle_c() {
      this.toggle_chat = !this.toggle_chat;
      if (this.toggle_chat) {
        document
          .querySelector(".barrage-wrapper")
          .setAttribute("style", "z-index:1;");
      } else {
        document
          .querySelector(".barrage-wrapper")
          .setAttribute("style", "z-index:-1;");
      }
    },
    toggle() {
      this.video_content = !this.video_content;
    },
    // 初始化模拟弹幕数据
    initTestData() {
      let arr = ["这是一条有弹幕", "好看好看", "主播很会玩呀", "一起嗨！！！"];
      let name = ["大泽哥", "小坤坤", "鸡哥", "篮球哥"];
      for (let i = 0; i < 1; i++) {
        for (let index = 0; index < 3; index++) {
          this.arr.push({
            direction: "default",
            content: arr[parseInt(Math.random() * arr.length)],
          });
          this.chat_content_list.push({
            name: name[parseInt(Math.random() * arr.length)],
            text: arr[parseInt(Math.random() * arr.length)],
            img: this.chat_content_img[parseInt(Math.random() * arr.length)],
          });
        }
      }
    },
    // 发送弹幕
    sendBarrage() {
      this.chat_content_list.push({
        name: "kunkun",
        text: this.sendContent,
      });
      if (
        this.arr.length > 1 &&
        this.sendContent != "" &&
        this.sendContent != null
      ) {
        this.arr.unshift({
          content: this.sendContent,
          direction: this.direction,
          isSelf: true,
          style: {
            color: "#ffffff",
            fontSize: "25px",
          },
          isJs: this.isJs,
        });
      } else {
        this.arr.push({
          content: this.sendContent,
          direction: this.direction,
          isSelf: true,
          style: {
            color: "#ffffff",
          },
          isJs: this.isJs,
        });
      }
      this.sendContent = null;
      this.$toast("发送成功");
    },
    //礼物切换
    gift_focus(item) {
      this.gift_item_lists = item;
      this.giftId = item.id;
      this.chat_show_img = item.img;
      // console.log(this.chat_show_img);
    },
    //礼物放到页面上面
    add() {
      if (window.localStorage.coin < 1000) {
        this.$toast("请充值");
        this.$router.push({ path: "/recharge" });
      } else {
        this.chat_content_list.push({
          name: "kunkun",
          img: this.chat_show_img,
          num: this.gift_item_num,
        });
        this.show = false;
        this.chat_show_img2 = this.chat_show_img;
        console.log(this.gift_item_num);
        console.log(this.gift_item_lists.price);
        setTimeout(() => {
          this.chat_show_img2 = "";
          this.gift_item_num = 1;
        }, 2000);
        this.coin =
          parseInt(window.localStorage.coin) -
          parseInt(this.gift_item_num) * parseInt(this.gift_item_lists.price);
        window.localStorage.coin = this.coin;
      }
    },
  },
  mounted() {
    // 初始化弹幕
    this.initTestData();
  },
  created() {
    getTotalData().then((data) => {
      let index = data.data.findIndex(
        (item) => item.id == this.$route.query.id
      );
      // console.log(data.data[index]);
      this.big_content.title = data.data[index].title;
      this.big_content.img = data.data[index].img;
      this.big_content.p = data.data[index].p;
      this.big_content.name = data.data[index].name;
      this.big_content.hot = data.data[index].hot;
      this.big_content.img_head = data.data[index].img_head;
      // console.log(this.big_content.video);
    });
    console.log(this.$route.query.id);
    let follow_item = JSON.parse(window.localStorage.getItem("total"));
    let index = follow_item.findIndex(
      (item) => item.id == this.$route.query.id
    );
    this.subscribe_show = follow_item[index].checked;
    if (!window.localStorage.coin) {
      window.localStorage.setItem("coin", 0);
    }
    this.coin = window.localStorage.coin;
    this.tab = 1;
    let i = this.video_data.findIndex(
      (item) => item.id == this.$route.query.id
    );
    this.big_content.video = this.video_data[i].video;
    getHomeData().then((data) => {
      // console.log(data.data);
      this.wzry = data.wzry;
    });
  },
  components: {
    VBarrage,
  },
};
</script>

<style lang="scss" scoped>
.van-popup {
  .van_popup_top {
    padding: 15px;
    display: flex;
    align-items: center;
    p {
      &:nth-child(1) {
        color: #191919;
        font-size: 18px;
      }
      &:nth-child(2) {
        color: #ccc;
        font-size: 14px;
      }
    }
  }
  .van_popup_item {
    padding: 15px;
    padding-top: 0;
    display: flex;
    .img {
      width: 40px;
      height: 40px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .van_popup_item_content {
      width: 100%;
      margin-left: 15px;
      p {
        &:nth-child(1) {
          color: #191919;
          font-weight: 700;
        }
        &:nth-child(2) {
          width: 100%;
          display: flex;
          color: #191919;
          font-size: 14px;
          justify-content: space-between;
        }
      }
    }
  }
  .van_popup_bottom {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      font-size: 30px;
      margin-left: 15px;
    }
    input {
      flex: 1;
      margin-right: 15px;
      border: none;
      color: #adadad;
      background: #ebebeb;
      padding: 10px;
      border-radius: 10px;
    }
  }
}
.dynamic_list {
  background-color: #f8f8f8;
  padding: 10px 0;
  padding-top: 1px;
  .dynamic_item {
    margin: 0 15px;
    margin-top: 10px;
    background-color: #ffffff;
    border-radius: 21px;
    .dynamic_item_top {
      display: flex;
      font-size: 12px;
      padding: 10px;
      .img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .name_time {
        margin-left: 8px;
        p {
          &:nth-child(1) {
            font-weight: bold;
          }
          &:nth-child(2) {
            color: #c9c6c4;
          }
        }
      }
    }
    .dynamic_item_content {
      padding: 0 10px;
      font-size: 14px;
    }
    .dynamic_item_bottom {
      display: flex;
      padding: 10px;
      color: #aeadad;
      align-items: center;
      p {
        &:nth-child(1) {
          margin-right: 12px;
          span {
            margin-right: 3px;
            &:nth-child(3) {
              font-size: 14px;
            }
          }
        }
        &:nth-child(2) {
          display: flex;
          align-items: center;
          .van-cell {
            background-color: #fff;
            .van-cell__value {
              margin-right: 3px;
              font-size: 10px;
            }
          }
          span {
            margin-right: 3px;
            margin-top: 2px;
          }
        }
      }
    }
  }
}
.dynamic {
  background-color: #ddd;
  .dynamic_top {
    background-color: #ffffff;
    color: #ff9000;
    padding: 10px 15px;
    border-top: 1px solid #ddd;
  }
}

// 主播信息
.anchor {
  padding: 15px;
  display: flex;
  .anchor_img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .anchor_info {
    flex: 1;
    margin-left: 10px;
    p {
      &:nth-child(1) {
        width: 100%;
        color: #333;
        font-size: 15px;
        font-weight: bold;
        padding: 1px 0;
      }
      &:nth-child(2) {
        color: #666;
        font-size: 13px;
        padding: 1px 0;
      }
      &:nth-child(3) {
        color: #999;
        font-size: 13px;
        padding: 1px 0;
        .hot {
          margin-left: 5px;
        }
      }
    }
  }
}

// 详情页面
.live {
  position: relative;
  // 直播视频
  .video-box {
    position: relative;
    height: 211px;
    overflow: hidden;
    // background: #000;
    .video-bf {
      height: 100%;
    }
    // 头部内容
    .video_top {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      color: #ffffff;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      margin-top: 8px;
      align-items: center;
      z-index: 9999;
      .video_top_left {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 10px;
        .indent {
          text-indent: 4px;
        }
      }
      .video_top_right {
        display: flex;
        margin: 0 10px;
        align-items: center;
        .img {
          width: 12px;
          height: 15px;
          margin-right: 5px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    // 底部内容
    .video_bottom {
      width: 100%;
      position: absolute;
      bottom: 8px;
      left: 0;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 9999;
      .video_bottom_left {
        margin-left: 12px;
        .iconfont {
          font-size: 26px;
        }
      }
      .video_bottom_right {
        display: flex;
        margin-right: 12px;
        p {
          font-size: 12px;
          padding: 4px 12px;
          border: 1px solid #ffffff;
          margin-left: 6px;
          border-radius: 15px;
        }
        .iconfont {
          padding: 0;
          border: none;
          font-size: 26px;
          margin-top: 1px;
        }
      }
    }
  }
}

// 头部导航栏
.home_nav {
  display: flex;
  padding: 15px;
  justify-content: space-between;
  align-items: center;
  .home_left {
    width: 100px;
    height: 30px;
    background-size: 100% 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .home_right {
    padding: 6px 14px;
    background-color: #f4f4f4;
    border-radius: 15px;
  }
  border-bottom: 1px solid #ededed;
}
.barrage-control {
  text-align: center;
  margin: 10px 0px;
}

// 聊天、主播、订阅
.live_tab {
  display: flex;
  z-index: 10000;
  .live_tab_item {
    display: flex;
    width: 33.3%;
    height: 40px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    &.con {
      color: #ffa200;
      border-bottom: 1px solid #ffa200;
      font-weight: 700;
    }
    &.subscribe {
      background-color: #ffa200;
      border-bottom: 1px solid #ffa200;
      color: #ffffff;
      .img {
        width: 15px;
        height: 13px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    &.already {
      background: #cccccc;
      border-bottom: 1px solid #cccccc;
    }
  }
}

// 聊天内容
.chat_content {
  width: 100%;
  height: 284px;
  background-color: #ffffff;
  overflow-y: scroll;
  .chat_content_item {
    display: flex;
    font-size: 14px;
    padding: 5px 10px;
    align-items: center;
    .name {
      color: #5896e9;
      margin-right: 4px;
    }
    .text {
      font-size: 14px;
      color: #151515;
    }
    img {
      width: 24px;
      height: 24px;
    }
  }
}

// 底部评论、礼物
.comment {
  display: flex;
  padding: 15px;
  justify-content: space-between;
  background-color: #f4f4f4;
  align-items: center;
  .comment_left {
    display: flex;
    align-items: center;
    flex: 1;
    margin-right: 20px;
    input {
      flex: 1;
      border: none;
      padding-right: 10px;
      padding-left: 10px;
      height: 40px;
      line-height: 40px;
      border-radius: 20px 0 0 20px;
    }
    p {
      border-radius: 0 20px 20px 0;
      width: 50px;
      height: 40px;
      line-height: 40px;
      background-color: #ffa200;
      color: #ffffff;
      text-indent: 6px;
    }
  }
  .comment_right {
    span {
      font-size: 28px;
    }
  }
}
.van-cell {
  padding: 0;
  background-color: #f4f4f4;
  margin-top: 4px;
  .van-cell__value {
    span {
      color: black;
      height: 30px;
      font-size: 24px;
    }
  }
}
// 礼物特效
.van-popup {
  .lists_img {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-left: 4px;
    .item_img {
      text-align: center;
      margin: 10px;
      margin-top: 15px;
      margin-bottom: 0;
      .img {
        width: 70px;
        height: 70px;
        border: 1px solid #ffffff;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &.con {
        .img {
          border: 1px solid #ffa200;
        }
      }
      .gift_name {
        font-size: 14px;
      }
      .gift_price {
        color: rgb(136, 136, 136);
        font-size: 14px;
      }
    }
  }
  .gift_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-top: 1px solid #ffa200;
    margin-top: 15px;
    .gift_bottom_left {
      display: flex;
      align-items: center;
      p {
        margin-right: 4px;
        &:nth-child(1) {
          color: #ffa200;
          font-size: 28px;
        }
        &:nth-child(2) {
          font-size: 20px;
          color: rgb(136, 136, 136);
          margin-top: 3px;
        }
        &:nth-child(3) {
          color: #ffa200;
          padding: 4px 6px;
          border: 1px solid #ffa200;
          border-radius: 10px;
          font-size: 14px;
          margin-top: 3px;
        }
      }
    }
    .gift_bottom_right {
      display: flex;
      align-items: center;
      p {
        margin-left: 4px;
        &:nth-child(1),
        &:nth-child(3) {
          padding: 4px 15px;
          border: 1px solid #ffa200;
          border-radius: 10px;
        }
        &:nth-child(2) {
          padding: 4px 8px;
        }
        &:nth-child(4) {
          padding: 4px 15px;
          background-color: #ffa200;
          color: #ffffff;
          border-radius: 10px;
        }
      }
    }
  }
}

//礼物显示
.img_show {
  position: absolute;
  top: 50%;
  left: 26%;
  img {
    width: 200px;
    height: 200px;
  }
}
//直播人员
.home_lists {
  .home_lists_top {
    padding: 10px;
    padding-bottom: 0;
    .home_lists_top_img {
      display: flex;
      align-items: center;
      img {
        width: 25px;
        height: 25px;
      }
      p {
        text-indent: 5px;
        font-size: 16px;
      }
    }
  }
  .home_lists_content {
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .home_item {
      width: 48%;
      margin-top: 10px;
      .home_item_img {
        width: 100%;
        height: 99px;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        p {
          font-size: 12px;
          position: absolute;
          top: 3px;
          right: 3px;
          padding: 2px 6px;
          vertical-align: middle;
          color: #eee;
          background: rgba(44, 49, 54, 0.7);
        }
      }
      .home_item_title {
        width: 100%;
        padding: 3px 0;
        font-size: 13px;
        color: #000;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: normal;
      }
      .home_item_bottom {
        display: flex;
        justify-content: space-between;
        height: 13px;
        line-height: 13px;
        font-size: 11px;
        color: #999;
        padding: 3px 0;
        .home_item_name {
          max-width: 40%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: normal;
        }
        .home_item_hot {
          display: flex;
          align-items: center;
          .home_item_hot_img {
            width: 13px;
            height: 13px;
            margin-right: 6px;
            margin-top: -3px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}

// 正在直播
.follow_live {
  padding: 0 15px;
  color: rgb(47, 47, 47);
  font-family: 黑体;
  font-weight: 700;
  font-size: 16px;
  margin-top: 10px;
}
</style>
